<template>
    <el-menu
        :default-active="$route.path"
        class="el-menu-vertical-demo"
        background-color="#00152A"
        text-color="#A3B2C0"
        active-text-color="white"
        :router="true"
    >
        <el-menu-item
            :index="item.index"
            v-for="item in menuData"
            :key="item.index"
        >
            <i :class="item.icon"></i>
            {{ item.title }}</el-menu-item
        >
    </el-menu>
</template>

<script>
export default {
    data() {
        return {
            menuData: [
                {
                    title: "首页",
                    index: "/index/home",
                    icon: "el-icon-s-home",
                },
                {
                    title: "用户管理",
                    index: "/index/users",
                    icon: "el-icon-user-solid",
                },
                {
                    title: "轮播图管理",
                    index: "/index/slideshow",
                    icon: "el-icon-picture-outline",
                },
                {
                    title: "菜谱管理",
                    index: "/index/menu",
                    icon: "el-icon-s-unfold",
                },
                {
                    title: "会员管理",
                    index: "/index/vip",
                    icon: "el-icon-s-custom",
                },
                {
                    title: "套餐管理",
                    index: "/index/setMeal",
                    icon: "el-icon-document-copy",
                },
            ],
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
    },
};
</script>

<style>
.el-menu-item.is-active {
    background-color: rgb(24, 144, 255) !important;
}
</style>